<template>
	<el-form ref="form" size="medium" :model="formData" :rules="formRules" class="radio_option_form">
		<el-table size="medium" :data="formData.children" border style="width: 100%">
			<el-table-column label="选项名" width="180">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`children.${$index}.label`" :rules="formRules.label">
						<el-input v-model="row.label"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="选项值">
				<template slot-scope="{ row, $index }">
					<el-form-item :prop="`children.${$index}.value`" :rules="formRules.value">
						<el-input v-model="row.value"></el-input>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column label="图片" width="160" v-if="type === '4'">
				<template slot-scope="{ row, $index }">
					<el-form-item>
						<input-uploader v-model="row.img"></input-uploader>
					</el-form-item>
				</template>
			</el-table-column>
			<el-table-column width="40" align="center">
				<template slot="header" slot-scope="{ row }">
					<el-button type="text" size="medium" icon="el-icon-plus" @click="handleAddedOption()"></el-button>
				</template>
				<template slot-scope="{ row, $index }">
					<el-button type="text" size="medium" icon="el-icon-delete" @click="handleDeleteOption($index)"></el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-form>
</template>

<script>
import inputUploader from './uploader';
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	components: { inputUploader },
	props: {
		value: { type: String, default: '' },
		type: { type: String, default: '' }
	},
	data() {
		return {
			options: this.value,
			optionData: [],
			formData: {},
			formRules: {
				label: [{ required: true, message: '请输入选项名称', trigger: 'blur' }],
				value: [{ required: true, message: '请输入选项值', trigger: 'blur' }]
			}
		};
	},

	watch: {
		value(val) {
			this.options = val;
		},
		options: {
			handler(val) {
				this.$emit('input', val);
				this.dispatch('ElFormItem', 'el.form.change', [val]);
				if (!!val && this.$isJSON(val) && Array.isArray(JSON.parse(val))) {
					this.$set(this.formData, 'children', JSON.parse(val));
				} else {
					this.$set(this.formData, 'children', []);
				}
			},
			immediate: true
		},
		type() {
			this.$set(this.formData, 'children', []);
		},
		formData: {
			handler(data) {
				if (data.children.length > 0) {
					this.options = JSON.stringify(data.children);
				} else {
					this.options = '';
				}
			},
			deep: true
		}
	},
	methods: {
		handleAddedOption() {
			let obj = { label: '', value: '' };
			if (this.type === 4) {
				obj['img'] = '';
			}
			this.formData.children.push(obj);
		},
		handleDeleteOption(index) {
			this.formData.children.splice(index, 1);
		},

		validChildForm() {
			return new Promise((resolve) => {
				this.$refs['form'].validate((valid) => {
					resolve(valid);
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.radio_option_form::v-deep {
	margin: 0 !important;
	.el-table {
		th,
		td {
			padding: 0;
			height: 36px;
			line-height: 1;
		}
		.cell {
			line-height: 1;
		}
		td .cell {
			padding: 0;
		}
	}
	.el-button {
		padding: 0;
	}
	.el-input__inner {
		border: none;
	}
	.is-error .el-input__inner {
		background-color: #fcc;
	}
	.el-table__empty-block {
		min-height: 37px;
	}
	.el-table__empty-text {
		line-height: 37px;
	}
}
</style>
